<template>
    <div>
        <div class="content">
            <h2 class="top_h">歌单</h2>
            <div class="top">
                <div class="tleft">
                    <img class="imgs" :src="detail.coverImgUrl" alt="" />
                    <p class="tleft_p">{{ playCount(detail.playCount) }}</p>
                </div>

                <div class="tright">
                    <p>{{ detail.name }}</p>
                    <p>网易云音乐</p>
                    <p>{{ detail.description }}</p>
                </div>
            </div>
            <p class="top_img">
                <img src="../../assets/imgs/分享.png" alt="" /><span
                    >分享给微信好友</span
                >
            </p>
        </div>
        <div class="down">
            <div class="dmain" v-for="(item, i) in songs" :key="i">
                <span>{{ i + 1 }}</span>
                <div class="dmindle" dmindle>
                    <p>{{ item.name }}</p>
                    <span v-for="(item, i) in item.ar" :key="i"
                        >{{ item.name }}
                    </span>
                </div>
                <img src="../../assets/imgs/播放.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            detail: {},
            songs: [],
        }
    },
    methods: {
        playCount(playCount) {
            if (playCount >= 100000000) {
                return (playCount / 100000000).toFixed(1) + '亿'
            } else if (playCount >= 1000000) {
                return (playCount / 1000000).toFixed(2) + '亿'
            } else {
                return playCount
            }
        },
        getDetail() {
            axios(
                'http://114.116.29.103:3000/playlist/detail?id=' +
                    this.$route.params.id
            ).then((res) => {
                this.detail = res.data.playlist
                console.log(res, 'ooo')
            })
        },
        getsongs() {
            axios(
                'http://114.116.29.103:3000/playlist/track/all?id=' +
                    this.$route.params.id +
                    '&limit=' +
                    20 +
                    'offset=' +
                    1
            ).then((res) => {
                this.songs = res.data.songs
                console.log(res.data.songs, 'qqq')
            })
        },
    },
    mounted() {
        this.getDetail()
        this.getsongs()
    },
    beforeRouteEnter(to, from, next) {
        console.log('路由页面进入前')
        next()
    },
}
</script>

<style scoped>
.content {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    background: pink;
    align-items: center;
    padding-bottom: 50px;
}
.top_h {
    color: #fff;
    font-size: 22px;
}
.top_img {
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    color: #fff;
}
.top_img img {
    width: 20px;
    height: 20px;
}
.top {
    background: pink;
    height: 25vh;
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
    padding-bottom: 20px;
}
.tleft {
    position: relative;
    margin: 0 20px;
}
.imgs {
    width: 150px;
    height: 150px;
}
.tleft p {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #fff;
    font-size: 14px;
}
.tright {
    font-size: 12px;
}
.tright p {
    margin: 20px;
}
.tright p:nth-of-type(1) {
    font-size: 20px;
    color: white;
}
.tright p:nth-of-type(2) {
    font-size: 16px;
    color: gray;
}
.tright p:nth-of-type(3) {
    font-size: 12px;
    color: #666;
}

/* ------------------ */
.down {
    height: 60vh;
    border-radius: 40px;
    background: white;
    overflow-y: auto;
    margin-top: -24px;
}
.dmain {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15px;
}
.dmain img {
    width: 30px;
    height: 30px;
    margin: 15px 0;
}
.dmindle {
    flex: 1;
    margin-left: 30px;
}
.dmindle p {
    margin: 5px 0;
}
.dmindle span {
    font-size: 12px;
}
</style>
